<template>
  <div class="TestObjectList h-full">
    <MyTable
      ref="$table"
      :columns="columns"
      :query-schemas="querySchemas"
      :get-data="testObjectApi.list"
      :index="true"
      :selection="true"
    >
      <template #handle>
        <n-button color="#6D61E3" class="big" @click="handleAdd">
          <template #icon>
            <img src="@/assets/images/add.png" />
          </template>
          创建被测对象
        </n-button>
      </template>
    </MyTable>

    <!-- <Teleport v-if="isMounted" :to="appStore.containerDom">
      <div class="teleport-area search-box">
        <div class="search-forms">
          <n-input
            v-model:value="queryItems.name"
            class="search"
            placeholder="请输入被测对象名称"
            :clearable="true"
            @clear="goSearch"
            @keyup.enter="goSearch"
          >
            <template v-if="appStore.isDeep" #clear-icon>
              <img src="@/assets/images/deep-clear.svg" />
            </template>
            <template #suffix>
              <img :src="appStore.searchImg" />
            </template>
          </n-input>
        </div>
        <div class="search-buttons">
          <n-button color="#6D61E3" class="big" @click="handleAdd">
            <template #icon>
              <img src="@/assets/images/add.png" />
            </template>
            创建被测对象
          </n-button>
        </div>
      </div>
    </Teleport> -->
    <MyForm ref="$form" :model-form="model" :disabled="type === 'view'" @submit="handleSubmit">
      <n-form-item
        label="被测对象名称"
        path="name"
        :rule="{ required: true, message: '请输入被测对象名称' }"
      >
        <n-input
          v-model:value="model.name"
          maxlength="50"
          show-count
          clearable
          placeholder="请输入被测对象名称"
        />
      </n-form-item>
      <n-form-item
        label="元任务类型"
        path="metaTaskTypeId"
        :rule="{ required: true, message: '请选择元任务类型' }"
      >
        <AsyncSelect
          v-model:value="model.metaTaskTypeId"
          :options="getMetaTaskTypeList"
          label-key="metaTaskName"
          value-key="id"
          placeholder="请选择元任务类型"
        />
      </n-form-item>
      <n-form-item label="标签1" path="tagId" :rule="{ required: true, message: '请选择标签1' }">
        <AsyncSelect
          v-model:value="model.tagId"
          :options="getTag1List"
          label-key="name"
          value-key="id"
          placeholder="请选择标签1"
        />
      </n-form-item>
      <n-form-item label="标签2" path="tag2Id" :rule="{ required: true, message: '请选择标签2' }">
        <AsyncSelect
          v-model:value="model.tag2Id"
          :options="getTag2List"
          label-key="name"
          value-key="id"
          placeholder="请选择标签2"
        />
      </n-form-item>
      <n-form-item
        label="测试模式"
        path="testModeId"
        :rule="{ required: true, message: '请选择测试模式' }"
      >
        <AsyncSelect
          v-model:value="model.testModeId"
          :options="getModeList"
          label-key="testModeName"
          value-key="id"
          placeholder="请选择测试模式"
        />
      </n-form-item>
      <div
        :class="['mb-24 ml-140 rounded-6 p-16', appStore.isDeep ? 'bg-#001B2E33' : 'bg-#F4F5F799']"
      >
        <n-form-item path="codeType">
          <MyTab v-model:value="model.codeType" :options="codeTypeOptions" />
        </n-form-item>
        <n-form-item
          label="选择算法框架"
          path="algorithmFrameId"
          :label-width="110"
          :rule="{ required: true, message: '请选择选择算法框架' }"
        >
          <AsyncSelect
            v-model:value="model.algorithmFrameId"
            :options="getFrameList"
            label-key="name"
            value-key="id"
            placeholder="请选择选择算法框架"
          />
        </n-form-item>
        <n-form-item
          label="启动文件路径"
          :label-width="110"
          path="startFilePath"
          :rule="{ required: true, message: '请输入启动文件路径' }"
        >
          <n-input
            v-model:value="model.startFilePath"
            maxlength="300"
            clearable
            placeholder="请输入启动文件路径"
          />
        </n-form-item>
        <n-form-item label="上传文件" :label-width="110" path="rawFileUrl">
          <FileUpload v-model="model.rawFileUrl" :accept="['zip']" :file-size="1000" />
        </n-form-item>
      </div>
      <n-form-item label="说明" path="info">
        <n-input
          v-model:value="model.info"
          clearable
          :maxlength="300"
          show-count
          type="textarea"
          :autosize="{
            minRows: 3,
          }"
        />
      </n-form-item>
    </MyForm>
  </div>
</template>
<script setup lang="jsx">
import * as testObjectApi from '@/api/testObject'
import { useCrud } from '@/hooks/useCrud'
import { useMounted } from '@/hooks/useMounted'
import { useAppStore } from '@/store'
defineOptions({
  name: 'TestObjectList',
})
const appStore = useAppStore()
const columns = [
  {
    title: '被测对象名称',
    key: 'name',
  },
  {
    title: '元任务类型',
    key: 'metaTaskTypeName',
  },
  {
    title: '标签1',
    key: 'tagName',
    render: ({ tagName }) => (tagName ? <Tag text={tagName} /> : '—'),
  },
  {
    title: '标签2',
    key: 'tag2Name',
    render: ({ tag2Name }) => (tag2Name ? <Tag text={tag2Name} /> : '—'),
  },
  {
    title: '创建时间',
    key: 'createTime',
    render: ({ createTime }) => $format(createTime),
  },
  {
    title: '创建时间2',
    key: 'createTime2',
    render: ({ createTime }) => $format(createTime),
  },
  {
    title: '创建时间3',
    key: 'createTime3',
    render: ({ createTime }) => $format(createTime),
  },
  {
    title: '创建时间4',
    key: 'createTime4',
    render: ({ createTime }) => $format(createTime),
  },
  {
    title: '创建时间5',
    key: 'createTime5',
    render: ({ createTime }) => $format(createTime),
  },
  {
    title: '创建时间6',
    key: 'createTime6',
    render: ({ createTime }) => $format(createTime),
  },
  {
    title: '创建时间7',
    key: 'createTime7',
    render: ({ createTime }) => $format(createTime),
  },

  {
    title: '创建时间8',
    key: 'createTime8',
    render: ({ createTime }) => $format(createTime),
  },
  {
    title: '创建时间9',
    key: 'createTime9',
    render: ({ createTime }) => $format(createTime),
  },
  {
    title: '创建时间10',
    key: 'createTime10',
    render: ({ createTime }) => $format(createTime),
  },
  {
    title: '操作',
    key: 'actions',
    width: 180,
    align: 'left',
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      return (
        <n-flex>
          <ActionButton onClick={() => handleEdit(row)}>修改</ActionButton>
          <ActionButton
            onClick={() =>
              handleDel(row, {
                content: `请确定是否删除：${row.name}`,
              })
            }
          >
            删除
          </ActionButton>
        </n-flex>
      )
    },
  },
]

const querySchemas = [
  {
    field: 'name',
    component: 'NInput',
    componentProps: {
      placeholder: '请输入被测对象名称',
    },
  },
  {
    field: 'name1',
    component: 'NInput',
    componentProps: {
      placeholder: '请输入被测对象名称',
    },
  },
]

const Tag = ({ text }) => {
  return (
    <>
      <div
        v-show={!appStore.isDeep}
        class="h-26 rounded-4 bg-#eeedfc px-8 text-14 color-#37383A font-400 lh-26"
      >
        {text}
      </div>
      <div
        v-show={appStore.isDeep}
        class="h-26 rounded-2 bg-#FFFFFF1a px-8 text-14 color-#FFF font-400 lh-26"
      >
        {text}
      </div>
    </>
  )
}
const { isMounted } = useMounted()
function getMetaTaskTypeList() {
  return testObjectApi.metaTaskTypeList()
}
function getTag1List() {
  return testObjectApi.tagList()
}
function getTag2List() {
  return testObjectApi.tag2List()
}
function getModeList() {
  return testObjectApi.modeList()
}
function getFrameList() {
  return testObjectApi.frameList()
}
const codeTypeOptions = ref([
  { label: '算法代码', value: 1 },
  { label: '镜像', value: 2 },
])

function goSearch() {
  nextTick(() => {
    $table.value.handleSearch()
  })
}

const { type, model, $form, $table, handleAdd, handleEdit, handleDel, handleSubmit } = useCrud({
  name: '被测对象',
  initForm: {
    id: null,
    name: null,
    metaTaskTypeId: null,
    tagId: null,
    tag2Id: null,
    testModeId: null,
    codeType: 1,
    algorithmFrameId: null,
    startFilePath: null,
    rawFileUrl: [],
    info: null,
  },
  apis: {
    add: testObjectApi.add,
    edit: testObjectApi.edit,
    del: ({ id }) => testObjectApi.del(id),
    view: ({ id }) => testObjectApi.info(id).then((res) => res.data),
  },
})
</script>
<style lang="scss" scoped></style>
